<template>
  <div class="playMusic">
    <!-- 背景 -->
    <div
      class="bg"
      @click="lyric.isLyric=!lyric.isLyric"
    ></div>
    <div class="playTop">
      <div
        class="back"
        @click="$emit('back')"
      >
        <i class="iconfont icon-zuojiantou"></i>
      </div>
      <div class="center">
        <div
          class="title"
          v-if="playDetail.al"
        >
          <div>{{getPlayDetailName}}</div>
          <!-- <div class="author">{{playDetail.ar[0].name}}</div> -->
        </div>

      </div>
      <div class="share">
        <i class="iconfont icon-fenxiang"></i>
      </div>
    </div>
    <!-- 磁盘内容区域 -->
    <div
      class="playContent"
      v-show="!lyric.isLyric"
    >
      <img
        class="needle"
        :class="{active:isPlay}"
        src="@/assets/needle-ab.png"
        alt=""
      >
      <div
        class="rorate"
        :class="{rotate:isRotate,pause:!isPlay}"
        ref='rotate'
      >
        <img
          class="disc"
          src="@/assets/disc.png"
          alt=""
        >
        <img
          class="playImg"
          :src="playDetail.al.picUrl"
          alt=""
        >
      </div>
    </div>
    <!-- 歌词区域 -->
    <div
      class="playLyric"
      v-show="lyric.isLyric"
    >
      <!-- :class="{active:(currentTime*1000>=item.pre&&currentTime*1000<item.time)}" -->
      <p
        v-for="(item,i) in lyric.lyricList"
        :key="i"
      >{{item.lyric}}</p>
    </div>
    <!-- 进度条区域 -->
    <div class="progressControl">
      <text>{{getCurrentTime}}</text>
      <!-- 总进度条 -->
      <div class="barControl">
        <!-- 实时进度条 -->
        <div
          class="audio-currentTime-Bar"
          :style="{width:getCurrentWidth}"
        >
          <!-- 小圆球 -->
          <div class="audio-circle"></div>
        </div>
      </div>
      <text>{{getSumTime}}</text>
    </div>
    <!-- 底部图标区域 -->
    <div class="playFooter">
      <i class="iconfont icon-24gl-repeat2"></i>
      <i
        class="iconfont icon-shangyishoushangyige"
        @click="goPlay(-1)"
      ></i>
      <i
        class="iconfont icon-a4gl-play123 play"
        v-show="!isPlay"
        @click="playMusic"
      ></i>
      <i
        class="iconfont icon-zanting_huaban1 play"
        v-show="isPlay"
        @click="playMusic"
      ></i>
      <i
        class="iconfont icon-xiayigexiayishou"
        @click="goPlay(1)"
      ></i>
      <i class="iconfont icon-liebiao2"></i>
    </div>
  </div>
</template>
<script>
let rotateVal = 0;
let InterVal
import bus from '@/utils/eventBus.js'
import { watch, reactive, onBeforeUpdate, Updated, onUpdated, ref, computed, onMounted } from 'vue'
import { useStore } from 'vuex'
import { useState } from '@/hooks/useState.js'
import { useLyric } from '@/hooks/useLyric.js'
import dayjs from 'dayjs'
dayjs().format()
export default {
  props: ['playDetail', 'isPlay', 'play', 'paused', 'isRotate', 'bofang', 'nowTime'],
  setup(props) {
    //数据
    const store = useStore()
    //与歌词相关的逻辑
    const lyric = useLyric()
    const playMusicList = reactive({
      //当前音乐播放时间
      currentTimes: 0,
      //进度条长度
      currentWidth: '',
      //歌曲总时长
      SumTime: "00:00",
    })
    console.log('歌词', lyric);
    //计算属性
    const getCurrentTime = computed(() => {
      return dayjs(parseInt(playMusicList.currentTimes * 1000)).format('mm:ss')
    })
    const getSumTime = computed(() => {
      return dayjs(parseInt(playMusicList.SumTime)).format('mm:ss')
    })
    const getCurrentWidth = computed(() => {
      return (store.state.currentTime / store.state.playlist[store.state.playCurrentIndex].dt) * 4060 + 'rem'
    })
    const getPlayDetailName = computed(() => {
      if (props.playDetail.al.name) {
        return props.playDetail.al.name
      } else {
        return store.state.playlist[store.state.playCurrentIndex].al.name
      }
    })
    //方法
    function goPlay(num) {
      playMusicList.currentTimes = "00:00"
      if (playMusicList.currentTimes = "00:00") {
        let index = store.state.playCurrentIndex + num
        if (index < 0) {
          index = store.state.playlist.length - 1;
        } else if (index == store.state.playlist.length) {
          index = 0
        }
        store.commit('setPlayIndex', index)
      }
      //切换歌词
      //如果处于播放状态切换下首歌时会直接
      lyric.getLyricList()
    }
    function playMusic() {
      props.play()
      bus.emit('isPlay', false)
    }
    onUpdated(() => {
      //修改进度时长
      playMusicList.currentTimes = store.state.currentTime
      //修改歌曲总时长
      playMusicList.SumTime = store.state.playlist[store.state.playCurrentIndex].dt
    })
    onMounted(() => {
      bus.on('ending', (res) => {
        console.log(res);
        playMusicList.currentTimes = 0
      })

    })



    return {
      playMusicList,
      lyric,
      goPlay,
      playMusic,
      getCurrentTime,
      getSumTime,
      getCurrentWidth,
      getPlayDetailName,
    }
  }
}
</script>

<style lang="less" scoped>
.playMusic {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  //背景区域
  .bg {
    background: url("../assets/bg.jpg") center no-repeat;
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-size: auto 100%;
    background-position: center;
    filter: blur(60px);
  }
  //头部区域
  .playTop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 7.5rem;
    height: 1.2rem;
    position: absolute;
    left: 0;
    top: 0;
    color: #fff;
    padding: 0 0.4rem;
    .iconfont {
      color: #fff;
      font-size: 0.4rem;
    }
    .center {
      .title {
        text-align: center;
        .author {
          font-size: 0.18rem;
          color: #ccc;
        }
      }
    }
  }
  //磁盘内容区域
  .playContent {
    position: absolute;
    width: 7.5rem;
    height: 7.5rem;
    left: 0;
    top: 1.5rem;
    .needle {
      width: 2rem;
      height: auto;
      position: absolute;
      top: -0.5rem;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      transform: rotate(-15deg);
      transition: all 1s;
      z-index: 10;
    }
    .needle.active {
      width: 2rem;
      height: auto;
      position: absolute;
      left: 3.5rem;
      transform-origin: 0.3rem 0;
      transform: rotate(5deg);
      transition: all 1s;
      z-index: 10;
    }
    .rorate {
      animation-fill-mode: forwards;
      -webkit-animation-fill-mode: forwards;
      position: relative;
      width: 5.5rem;
      height: auto;
      position: absolute;
      left: calc(50% - 2.75rem);
      height: 5.5rem;
      top: 1.5rem;
      .disc {
        width: 5.5rem;
        height: auto;
        position: absolute;
        left: calc(50% - 2.75rem);
      }
      .playImg {
        width: 3.4rem;
        height: 3.4rem;
        border-radius: 1.7rem;
        position: absolute;
        left: calc(50% - 1.7rem);
        top: 50%;
        margin-top: -1.7rem;
      }
    }
    .rotate {
      animation: rotate 6s linear infinite;
    }
    .pause {
      animation-play-state: paused;
    }
  }
  //底部图标区域
  .playFooter {
    width: 7.5rem;
    height: 1.5rem;
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.4rem;
    .iconfont {
      color: #fff;
      font-size: 0.5rem;
    }
    .play.iconfont {
      font-size: 1rem;
    }
  }
  //歌词区域
  .playLyric {
    font-size: 0.3rem;
    position: absolute;
    width: 7.5rem;
    height: 8rem;
    left: 0;
    top: calc(50% - 5rem);
    overflow: scroll;
    text-align: center;
    color: #ccc;
    // padding: 0.4rem 0.2rem;
    p {
      padding: 0.2rem;
    }
    .active {
      color: #fff;
    }
  }
}
//进度条区域
.progressControl {
  position: absolute;
  width: 7.5rem;
  padding: 0 0.5rem;
  bottom: 1.5rem;
  height: 0.8rem;
  display: flex;
  align-items: center;
  text {
    margin: 0 0.3rem;
    font-size: 0.2rem;
    color: #ccc;
  }
}
.barControl {
  position: relative;
  width: 4.5rem;
  height: 0.04rem;
  background-color: rgba(0, 0, 0, 0.4);
  margin: auto;
}
.audio-currentTime-Bar {
  position: absolute;
  top: 0;
  left: 0;
  height: 0.04rem;
  background-color: red;
  z-index: 100;
}
/* 小圆球 */
.audio-circle {
  position: absolute;
  right: -0.12rem;
  top: -0.04rem;
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background-color: #fff;
  z-index: 10;
}
//旋转动画
//    @-webkit-keyframes rotate {
//   animation-fill-mode:forwards;
//   -webkit-animation-fill-mode: forwards;
//   0% {
//     transform: rotate(0);
//   }
//   100% {
//     transform: rotate(1turn);
//   }
//   }
@-webkit-keyframes rotate {
  0% {
    transform: rotateZ(0deg);
    /*从0度开始*/
  }
  100% {
    transform: rotateZ(360deg);
    /*360度结束*/
  }
}
</style>